<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>注册</title>
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/cowcat.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
    <script src="../bootstrap-4.6.1-dist/js/bootstrap.bundle.min.js"></script>
    <script src="../js/vue.global.js"></script>
    

    <style>    
        .topView {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        form {
            background-color: #faf8fb;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 10px;
        }

        .bottomView {
            display: flex;
            justify-content: center;
        }

        .menuView {
            padding: 0 6.0185vw 20px 6.0185vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .middleLine {
            padding-left: 20px;
            padding-right: 20px;
        }

        span,label {
            color: #666;
        }
    </style>

</head>

<body>
    <div class="mainView">
        <div class="topView">
            <form v-on:submit.prevent>
                <div class="form-group">
                    <label for="exampleInputEmail1">用户名</label>
                    <input type="text" class="form-control" id="exampleInputEmail1" v-model="userName" v-on:input="checkFinish">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密码</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" v-model="password" v-on:input="checkFinish">
                </div>
                <button v-on:click="register" class="btn btn-primary btn-block" v-bind:disabled='flag'>注册</button>
            </form>
        </div>
        <div class="bottomView">
            <div class="menuView">
                <span v-on:click="jumpToLogin">登录</span><span class="middleLine">|</span><span v-on:click="jumpToHelp">使用帮助</span>
            </div>
        </div>





        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">提示</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{tipMessage}}
                    </div>
                </div>
            </div>
        </div>





    </div>
</body>
<script>
    const vueApp = {
        data() {
            return {
                userName: '',
                password: '',
                tipMessage: '',
                flag:true
            }
        },
        methods: {
            register() {
                let uName = this.userName
                let pword = this.password
                let _this=this
                $.post('/register', { 'userName': uName, 'password': pword }, function (res) {
                    console.log("返回",res)               
                    _this.tipMessage=res.data.isSuccess?"恭喜您，注册成功！":res.data.errorMsg
                    $('#exampleModal').modal('show')                      
                })
            },
            jumpToLogin() {
                window.location.href = "../index.html"
            },
            checkFinish(){
                if(this.userName&&this.password){
                    this.flag=false
                }else{
                    this.flag=true
                }
            },
            jumpToHelp(){
                window.location.href='../helpInfo.html'
            }

        }
    }

    Vue.createApp(vueApp).mount(".mainView")
</script>

</html>